<template>
    <view style="padding: 20rpx">
        <view class="title">预置点巡航</view>
        <view class="content">
            <template v-for="(item, index) in presetList">
                <view :key="item.id" :class="'box ' + (item.active ? 'active' : '')" @tap="bindtapSet(item)">{{ item.id }}</view>
            </template>
        </view>
        <button type="primary" @tap="bindtapCruise">开始巡航</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            device: {},
            presetList: [
                {
                    id: 1,
                    value: 1,
                    active: false
                },
                {
                    id: 2,
                    value: 120,
                    active: false
                },
                {
                    id: 3,
                    value: 255,
                    active: false
                }
            ]
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        console.log(JSON.parse(options.device));
        this.device = JSON.parse(options.device)
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        bindtapSet(ev) {
            console.log(ev);
            let active = ev.active;
            let preset = Number(ev.preset);
            this.presetList.forEach((item) => {
                if (item.value === preset) {
                    item.active = !item.active;
                }
            });
			// 选中
			if (!active) {
				this.setPreset(preset);
			} // 取消
			else {
				this.clearPreset(preset);
			}
        },

        // 设置
        setPreset(preset) {
            let token = this.device.token;
            let data = {
                Name: 'OPPTZControl',
                OPPTZControl: {
                    Command: 'SetPreset',
                    Parameter: {
                        Preset: preset,
                        Channel: 0,
                        PresetName: '预置点' + preset
                    }
                }
            };
            getApp().globalData.api.opdev(data, token, (result) => {
                console.log('设置预置点：', result);
            });
        },

        // 删除
        clearPreset(preset) {
            let token = this.device.token;
            let data = {
                Name: 'OPPTZControl',
                OPPTZControl: {
                    Command: 'ClearPreset',
                    Parameter: {
                        Preset: preset,
                        Channel: 0,
                        PresetName: '预置点' + preset
                    }
                }
            };
            getApp().globalData.api.opdev(data, token, (result) => {
                console.log('删除预置点：', result);
            });
        },

        // 巡航
        bindtapCruise(ev) {
            let preset = this.presetList[1].value;
            let token = this.device.token;
            let data = {
                Name: 'OPPTZControl',
                OPPTZControl: {
                    Command: 'GotoPreset',
                    Parameter: {
                        Preset: preset,
                        Channel: 0,
                        PresetName: '预置点' + preset
                    }
                }
            };
            getApp().globalData.api.opdev(data, token, (result) => {
                console.log('转到预置点：', result);
            });
        }
    }
};
</script>
<style>
.title {
    width: auto;
}

.content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 60rpx 0;
}

.box {
    width: 100rpx;
    height: 100rpx;
    border: 1px solid #999999;
    border-radius: 12rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 36rpx;
}
.box.active {
    border: 1px solid #FF0025;
    color: #FF0025;
}
</style>
